<template>
  <!-- <div>金刚区111</div> -->
  <div class="ColumnList">
    <div class="list-title">
      <span v-if="columnName">{{ columnName }}</span>
      <span v-else>金刚区</span>
    </div>
    <div class="list-content" v-if="columnContent.length != 0">
      <template v-for="(item, index) in columnContent">
        <div class="list-content-box"  @click="updateColumnClick">
      
      <div class="left">
       <img :src="item.picUrl" />
      </div>

      <div class="right">
       <!-- +金刚区 -->
       {{ item.elementName }}
      </div>
     </div>
      </template>


      <div class="list-content-box"  @click="updateColumnClick">
      
       <div class="left">
        <img src="../../../assets/qxbNull.png" />
       </div>

       <div class="right">
        +金刚区
       </div>
      </div>

    </div>

    <!-- 栏目为空时，显示默认占位盒 -->

    <div class="list-content-null" v-else>
      <div class="list-content-box"  @click="updateColumnClick">
      
       <div class="left">
        <img src="../../../assets/qxbNull.png" />
       </div>

       <div class="right">
        +金刚区
       </div>
      </div>

    </div>
  </div>
</template>

<script type="ts">
import { defineComponent,computed} from "vue";

export default defineComponent({
  props: ['attrData','updateColumn'],
  setup (props) {
    const columnName = computed(() => {
      return props.attrData.columnName;
    })


    const columnContent = computed(() => {
      return props.attrData.columnContent || [];
    })

    const updateColumnClick = (index) => {
      console.log(columnContent, index, columnContent.value[index], 'columnContent123')
      const item = columnContent.value[index]
      props.updateColumn({
        ...item
      })
    }
    return {
      columnName,
      columnContent,
      updateColumnClick
    }
  }
});
</script>

<style lang="scss" scoped>

.ColumnList{
  width: 100%;

  .list-title {
    font-size: 18px;
    // font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .list-content,
  .list-content-null{
    width: 100%;
    display: flex;
    // flex-wrap: wrap;
    flex-flow: row wrap;
    // justify-content: space-between;
    .list-content-box{
      width: 60px;
      padding: 0 5px;
      margin: 5px;
      img{
        width: 100%;
        height: 50px;
      }

      .right{
        width: 100%;
        font-size: 12px;
        color: #666;
        line-height: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }

}
</style>
